<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '80px',
    }"
  >
    <div class="wrap-btn-group">
      <span class="wrap-btn wrap-go-back" @click="go">返回</span>
    </div>
    <div class="wrap-other-roll">
      <div class="card">
        <div class="title">基础信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="标题" :span="2">
            {{ info.title }}
          </el-descriptions-item>
          <el-descriptions-item label="摘要" :span="2">
            {{ info.resume }}
          </el-descriptions-item>
          <el-descriptions-item label="作者">
            {{ info.author }}
          </el-descriptions-item>
          <el-descriptions-item label="来源">
            {{ info.source }}
          </el-descriptions-item>
          <el-descriptions-item label="网址" :span="2">
            {{ info.linkUrl }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ info.articleType == 1 ? '专题' : '新闻' }}
          </el-descriptions-item>
          <el-descriptions-item label="栏目">
            {{ info.columnName }}
          </el-descriptions-item>
          <el-descriptions-item label="缩略图" :span="2">
            <el-image
              style="height: 80px"
              v-if="info.previewImg"
              :src="info.previewImg"
              :preview-src-list="[info.previewImg]"
            >
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item label="提交人">
            {{ info.addName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ info.addTime }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            {{ info.articleStatus == 0 ? '启用' : '停用' }}
          </el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <span v-if="info.approveStatus == 0">草稿</span>
            <span v-if="info.approveStatus == 1">发布</span>
            <span v-if="info.approveStatus == 2">通过</span>
            <span v-if="info.approveStatus == 3">驳回</span>
          </el-descriptions-item>
          <el-descriptions-item label="审批意见" :span="2">
            <el-tooltip
              popper-class="ellipsis-tip-span2"
              :content="info.approveResult"
              placement="top-start"
            >
              <span class="ellipsis-span2">{{ info.approveResult }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="内容" :span="2">
            <div class="wrap-html" v-html="info.content"></div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="card">
        <div class="title">审批信息</div>
        <el-table
          :data="approves"
          :header-cell-style="{ background: '#F6F7F9' }"
        >
          <el-table-column prop="title" label="节点名称"> </el-table-column>
          <el-table-column prop="taskUserName" label="处理人">
          </el-table-column>
          <el-table-column label="处理结果">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">正在执行中</span>
              <span v-if="scope.row.status == 1">通过</span>
              <span v-if="scope.row.status == 2">驳回</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditNote" label="处理意见">
            <template slot-scope="scope">
              <el-tooltip
                popper-class="ellipsis-tip"
                :content="scope.row.auditNote"
                placement="top-start"
              >
                <span class="ellipsis">{{ scope.row.auditNote }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="处理时间">
          </el-table-column>
          <el-table-column label="附件" width="50px" align="center">
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="view(scope.row)"
                >查看</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: right; margin-top: 20px" v-if="$route.query.type">
        <span class="wrap-btn wrap-success" @click="approval(1)">通过</span>
        <span class="wrap-btn wrap-danger" @click="approval(2)">驳回</span>
      </div>
    </div>
    <!-- 审批信息 -->
    <el-dialog title="审批信息" :visible.sync="visible" width="888px">
      <el-form label-width="80px" :model="form" size="medium">
        <el-form-item label="审批意见">
          <el-input
            type="textarea"
            v-model="form.auditNote"
            maxlength="100"
            placeholder="请填写审批意见"
            rows="2"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <web-upload @upload="upload" type="file" />
          <el-table :data="form.auditFile" v-if="form.auditFile.length > 0">
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <el-tooltip
                  popper-class="ellipsis-tip"
                  :content="scope.row.name"
                  placement="top-start"
                >
                  <span class="ellipsis">{{ scope.row.name }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="大小"></el-table-column>
            <el-table-column
              prop="content"
              label="操作"
              width="100px"
              align="center"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="downloadFile(scope.row)"
                  >下载</el-link
                >
                <el-link
                  type="danger"
                  :underline="false"
                  style="margin-left: 10px"
                  @click="remove(scope.row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="text-align: end">
          <span class="wrap-btn wrap-success" @click="save">确定</span>
          <span class="wrap-btn wrap-default" @click="visible = false"
            >取消</span
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <file-preview :visible="isLook" :data="lookData" @close="isLook = false" />
  </div>
</template>

<script>
import filePreview from '@c/filePreview.vue'
export default {
  components: { filePreview },
  data() {
    return {
      info: {},
      approves: [],
      visible: false,
      form: { auditFile: [] },
      lookData: [],
      isLook: false,
    }
  },
  created() {
    if (this.$route.query.id) {
      this.itemList()
    }
  },
  methods: {
    go() {
      //返回
      this.$store.dispatch('tags/delVisitedRoute', {
        path: this.$route.path,
      })
      this.$router.push('/portalCenter/audit')
    },
    itemList() {
      // 获取详情
      this.$axios
        .get(
          `/admin/portal/article/findApprove?id=${this.$route.query.id}&runTaskId=${this.$route.query.runTaskId}`
        )
        .then((data) => {
          this.info = {}
          this.approves = []
          if (data.code == 200) {
            this.info = data.data.info
            this.approves = data.data.approves
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    approval(type) {
      //审批
      this.form = {
        auditFile: [],
        result: type,
        linkId: this.info.linkId,
        runTaskId: this.info.runTaskId,
        id: this.info.id,
      }
      this.visible = true
    },
    save() {
      //保存
      if (!this.form.auditNote && this.form.result != 1) {
        this.$message.error('请填写审批意见')
        return false
      }
      this.$axios
        .post('/admin/portal/article/approve', this.form)
        .then((data) => {
          if (data.code == 200) {
            this.visible = false
            this.$message.success('操作成功！')
            this.$store.dispatch('tags/delVisitedRoute', {
              path: this.$route.path,
            })
            this.$router.push('/portalCenter/audit')
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    upload(data) {
      //上传
      this.form.auditFile.push(data)
    },
    downloadFile(item) {
      //下载附件
      const a = document.createElement('a')
      a.download = item.name
      a.href = item.fileDomain + item.url
      a.click()
    },
    remove(item) {
      //删除
      var index = this.form.auditFile.indexOf(item)
      if (index !== -1) {
        this.form.auditFile.splice(index, 1)
      }
    },
    view(item) {
      //查看
      this.lookData = this.fileArr(item.auditFile)
      this.isLook = true
    },
    fileArr(fileStr) {
      if (Object.prototype.toString.call(fileStr).slice(8, -1) === 'Array') {
        return fileStr
      } else {
        let arrtry = []
        try {
          arrtry = fileStr ? JSON.parse(fileStr) : []
          return arrtry
        } catch (error) {
          arrtry = []
          return arrtry
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
    margin-bottom: 15px;
  }
}
</style>
